<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="./css/index.css">

</head>

<body>

    <div class="qqBox">
        <!-- xx -->
        <div class="BoxHead">
            <!-- <div class="headImg">
			<img src="./index_files/6.jpg">
		</div> -->
            <div class="internetName"></div>
            <div class="tubiao">
                <span><img style="width: 20px; margin: 15px 5px;" src="./iocn/xiao.png" alt=""></span>
                <span><img style="width: 20px; margin: 15px 5px;" src="./iocn/da.png" alt=""></span>
                <span><img style="width: 20px; margin: 15px 5px;" src="./iocn/iocnqx.png" alt=""></span>
            </div>
        </div>
        <!-- 好友聊天类容 -->
        <div class="context">

            <div class="conLeft">
                <div class="shouBox">
                    <div class="shous">
                        <div style="height: 60px;">
                            <img class="touimg" src="./img/touxiang3.png" alt="">
                        </div>
                        <div class="txiangName">大吉大利</div>
                        <div style="height: 52px;">
                            <img class="caidanImg" src="./iocn/caidan.png" alt="">
                        </div>
                    </div>


                    <!-- 搜索 -->

                    <form style="height: 130px;" onSubmit="submitFn(this, event);">
                        <div class="search-wrapper">
                            <div class="input-holder">
                                <input type="text" class="search-input" placeholder="请输入关键词" />
                                <button class="search-icon" onClick="searchToggle(this, event);"><span></span></button>
                            </div>
                            <span class="close" onClick="searchToggle(this, event);"></span>
                            <div class="result-container">

                            </div>
                        </div>
                    </form>

                    <!-- 菜单分组 -->
                    <div class="aui-flexView">

                        <div class="aui-scrollView">
                            <div class="aui-tab-box" data-ydui-tab>
                                <div class="tab-nav">
                                    <div class="tab-nav-item tab-active">
                                        <a href="javascript:;">消息</a>
                                    </div>
                                    <div class="tab-nav-item">
                                        <a href="javascript:;">好友</a>
                                    </div>
                                    <div class="tab-nav-item">
                                        <a href="javascript:;">收藏</a>
                                    </div>
                                </div>

                                <div class="tab-panel">
                                    <!--消息-->
                                    <div class="tab-panel-item tab-active">
                                        <div class="tab-item">
                                            <a href="javascript:;" class="aui-list-item">
                                                <ul>
                                                    <li>
                                                        <div class="liLeft"><img
                                                                src="./index_files/20170926103645_04.jpg"></div>
                                                        <div class="liRight">
                                                            <span class="intername">前端交流群</span>
                                                            <span class="infor">厉害了</span>
                                                        </div>
                                                    </li>
                                                    <li class="bg">
                                                        <div class="liLeft"><img
                                                                src="./index_files/20170926103645_19.jpg"></div>
                                                        <div class="liRight">
                                                            <span class="intername">赵鹏</span>
                                                            <span class="infor">[流泪]</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="liLeft"><img
                                                                src="./index_files/20170926103645_27.jpg"></div>
                                                        <div class="liRight">
                                                            <span class="intername">web交流群</span>
                                                            <span class="infor">666</span>
                                                        </div>
                                                    </li>

                                                </ul>

                                            </a>
                                            <!-- 2 -->
                                            <!-- <a href="javascript:;" class="aui-list-item">
                                                  
                                                </a> -->

                                        </div>
                                    </div>

                                    <!--好友列表-->
                                    <div class="tab-panel-item">
                                        <div class="tab-item">

                                            <a href="javascript:;" class="aui-list-item">
                                                <ul>
                                                    <li>
                                                        <div class="liLeft"><img
                                                                src="./index_files/20170926103645_04.jpg"></div>
                                                        <div class="liRight">
                                                            <span class="intername">前端交流群</span>
                                                            <span class="infor">厉害了</span>
                                                        </div>
                                                    </li>
                                                    <li class="">
                                                        <div class="liLeft"><img
                                                                src="./index_files/20170926103645_19.jpg"></div>
                                                        <div class="liRight">
                                                            <span class="intername">赵鹏</span>
                                                            <span class="infor">[流泪]</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="liLeft"><img
                                                                src="./index_files/20170926103645_27.jpg"></div>
                                                        <div class="liRight">
                                                            <span class="intername">web交流群</span>
                                                            <span class="infor">666</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="liLeft"><img
                                                                src="./index_files/20170926103645_04.jpg"></div>
                                                        <div class="liRight">
                                                            <span class="intername">前端交流群</span>
                                                            <span class="infor">厉害了</span>
                                                        </div>
                                                    </li>
                                                    <li class=>
                                                        <div class="liLeft"><img
                                                                src="./index_files/20170926103645_19.jpg"></div>
                                                        <div class="liRight">
                                                            <span class="intername">赵鹏</span>
                                                            <span class="infor">[流泪]</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="liLeft"><img
                                                                src="./index_files/20170926103645_27.jpg"></div>
                                                        <div class="liRight">
                                                            <span class="intername">web交流群</span>
                                                            <span class="infor">666</span>
                                                        </div>
                                                    </li>
                                                    <li class=>
                                                            <div class="liLeft"><img
                                                                    src="./index_files/20170926103645_19.jpg"></div>
                                                            <div class="liRight">
                                                                <span class="intername">赵鹏</span>
                                                                <span class="infor">[流泪]</span>
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <div class="liLeft"><img
                                                                    src="./index_files/20170926103645_27.jpg"></div>
                                                            <div class="liRight">
                                                                <span class="intername">web交流群</span>
                                                                <span class="infor">666</span>
                                                            </div>
                                                        </li>
                                                        <li class=>
                                                                <div class="liLeft"><img
                                                                        src="./index_files/20170926103645_19.jpg"></div>
                                                                <div class="liRight">
                                                                    <span class="intername">赵鹏</span>
                                                                    <span class="infor">[流泪]</span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="liLeft"><img
                                                                        src="./index_files/20170926103645_27.jpg"></div>
                                                                <div class="liRight">
                                                                    <span class="intername">web交流群</span>
                                                                    <span class="infor">666</span>
                                                                </div>
                                                            </li>

                                                </ul>

                                            </a>

                                        </div>
                                    </div>

                                    <!--收藏-->
                                    <div class="tab-panel-item">
                                        <div class="tab-item">

                                            <a href="javascript:;" class="aui-list-item">
                                                
                                                <div class="aui-list-item-bd">
                                                    <h4>收藏</h4>
                                                   
                                                </div>
                                               
                                            </a>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>


                </div>
               
            </div>
            <div class="conRight">
                <div class="Righthead">
                    <!-- <div class="headName">赵鹏</div>
				<div class="headConfig">
					<ul>
						<li><img src="./index_files/20170926103645_06.jpg"></li>
						<li><img src="./index_files/20170926103645_08.jpg"></li>
						<li><img src="./index_files/20170926103645_10.jpg"></li>
						<li><img src="./index_files/20170926103645_12.jpg"></li>
					</ul>
				</div> -->
                </div>
                <!-- 显示聊天内容 -->
                <div class="RightCont">
                    <ul class="newsList">

                        <li>
                            <div class="nesHead"><img src="./index_files/6.jpg"></div>
                            <div class="news"><img class="jiao" src="./img/you.jpg"><img class="Expr"
                                    src="./index_files/em_55.jpg"></div>
                        </li>
                        <li>
                            <div class="nesHead"><img src="./index_files/6.jpg"></div>
                            <div class="news"><img class="jiao" src="./img/you.jpg"><img class="Expr"
                                    src="./index_files/em_37.jpg"></div>
                        </li>
                        <li>
                            <div class="nesHead"><img src="./index_files/6.jpg"></div>
                            <div class="news"><img class="jiao" src="./img/you.jpg"><img class="Expr"
                                    src="./index_files/em_40.jpg"></div>
                        </li>
                    </ul>
                </div>
                <div class="RightFoot">
                    <div class="emjon" style="display: none;">
                        <ul>
                            <li><img src="./index_files/em_02.jpg"></li>
                            <li><img src="./index_files/em_05.jpg"></li>
                            <li><img src="./index_files/em_07.jpg"></li>
                            <li><img src="./index_files/em_12.jpg"></li>
                            <li><img src="./index_files/em_14.jpg"></li>
                            <li><img src="./index_files/em_16.jpg"></li>
                            <li><img src="./index_files/em_20.jpg"></li>
                            <li><img src="./index_files/em_23.jpg"></li>
                            <li><img src="./index_files/em_25.jpg"></li>
                            <li><img src="./index_files/em_30.jpg"></li>
                            <li><img src="./index_files/em_31.jpg"></li>
                            <li><img src="./index_files/em_33.jpg"></li>
                            <li><img src="./index_files/em_37.jpg"></li>
                            <li><img src="./index_files/em_38.jpg"></li>
                            <li><img src="./index_files/em_40.jpg"></li>
                            <li><img src="./index_files/em_45.jpg"></li>
                            <li><img src="./index_files/em_47.jpg"></li>
                            <li><img src="./index_files/em_48.jpg"></li>
                            <li><img src="./index_files/em_52.jpg"></li>
                            <li><img src="./index_files/em_54.jpg"></li>
                            <li><img src="./index_files/em_55.jpg"></li>
                        </ul>
                    </div>
                    <div class="footTop">
                        <ul>
                            <!-- <li><img src="./index_files/20170926103645_31.jpg"></li> -->
                            <li class="ExP"><img src="./index_files/20170926103645_33.jpg"></li>
                            <!-- <li><img src="./index_files/20170926103645_35.jpg"></li>
						<li><img src="./index_files/20170926103645_37.jpg"></li> -->
                            <li><img src="./index_files/20170926103645_39.jpg"></li>
                            <!-- <li><img src="./index_files/20170926103645_41.jpg" alt=""></li> -->
                            <li><img src="./index_files/20170926103645_43.jpg"></li>
                            <!-- <li><img src="./index_files/20170926103645_45.jpg"></li> -->
                        </ul>
                    </div>
                    <div class="inputBox">
                        <textarea id="dope" style="width: 99%;height: 75px; border: none;outline: none; resize:none;"
                            name="" rows="" cols=""></textarea>
                        <button class="sendBtn">发送(s)</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>



</body>

</html>